<template>
  <div>
      <TitHead tit='交班记录'><van-icon name="weapp-nav" /></TitHead>
       <div class="con">
          <div class="tit">请选择老人编号</div>
          <div class="btn"><van-icon name="arrow" /></div>
      </div>
      <div v-for="(item,index) in data" :key="index">
        <div class="select">
            <div class="tit">{{item.tit}}</div>
            <div class="bingo" @click="select(index)" ><van-icon name="success" class="iconSuc" v-show="item.isShow"/></div>
        </div>
      </div>
      <textarea name="" id="" cols="30" rows="10" v-model="con" class="text" placeholder="如有不良反应请文字说明"></textarea>
      <div class="select">
            <div class="tit">服药期间是否有禁忌</div>
            <div class="bingo" @click="tab" ><van-icon name="success" class="iconSuc" v-show="isShow"/></div>
    </div>
    <textarea name="" id="" cols="30" rows="10" v-model="taboo" class="text" placeholder="如有禁忌请文字说明"></textarea>
  </div>
</template>

<script>
import TitHead from '../../components/TitHead'
export default {
name:'Record',
components:{
    TitHead
},
data() {
    return {
        isShow:false,
      data:[{
          tit:'最近是否服药',
          isShow:false,
      },{
          tit:'是否按时服药',
          isShow:false,
      },{
          tit:'药品是否充足',
          isShow:false,
      },{
          tit:'服药后是否有不良反应',
          isShow:false,
      },],
      con:'',
      taboo:''
    };
  },
  methods:{
      select(i){
          console.log(this.data[i]);
          this.data[i].isShow=!this.data[i].isShow
      },
      tab(){
          this.isShow=!this.isShow
      }
  }
}
</script>

<style scoped>
.con{
    background-color: #fff;
    clear: both;
    overflow: hidden;
    margin: 0.5rem 0;
}
.tit{
    float: left;
    font-size: 0.4rem;
    font-weight: 500;
    padding: 0.4rem 0 0.4rem 0.58rem;
}
.btn{
   float: right;
   margin-right: 0.4rem;
   font-size: 0.4rem;
   color: rgba(170, 166, 166, 0.582);
   line-height: 1.4rem;
}
.select{
    background-color: #fff;
    clear: both;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}
.bingo{
    width: 0.6rem;
    height: 0.4rem;
    border: 1px solid;
    float: right;
    margin-right: 0.6rem;
    margin-top: 0.5rem;
}
.iconSuc{
    font-size: 0.8rem;
    line-height: 0.4rem;
}
.text{
    width: 100%;
    height: 2.5rem;
    border: none;
    padding: 0.4rem;
    background-color: #f5f5f5;
    font-size: 0.4rem;
    box-sizing: border-box;
}
</style>